<template>

    <n-grid :cols="12" item-responsive responsive="screen">
        <n-gi span="12 m:8 l:6" offset="0 m:2 l:3">
            <n-page-header @back="handleBack">
                <template #title>
                    <n-text>返回 </n-text>
                    <n-tag type="info">
                        共获得：{{studentExamInfo['studentExam']==null?0:studentExamInfo['studentExam']['correction']['totalScore']}}分
                    </n-tag>
                </template>

                <template #footer>

                </template>
            </n-page-header>
            <n-card>
                <n-space vertical>
                    <template v-for="(question) in studentExamInfo['questionList']">
                        <n-card>
                            <n-space vertical>
                                <!-- 标题 -->
                                <n-space>
                                    <n-tag v-if="studentCorrection[question.QID.toString()]['isCorrect'] == true"
                                        type="success" size="small">
                                        {{  questionValueKey[question['type']]  }}
                                        ( {{  question['score'] + '分'  }} )
                                    </n-tag>
                                    <n-tag v-else-if="question['type'] == 4" type="warning" size="small">
                                        {{  questionValueKey[question['type']]  }}
                                        ( {{  question['score'] + '分'  }} )
                                    </n-tag>
                                    <n-tag v-else type="error" size="small">
                                        {{  questionValueKey[question['type']]  }}
                                        ( {{  question['score'] + '分'  }} )
                                    </n-tag>
                                    {{  question.title  }}
                                </n-space>
                                <!-- 内容 -->
                                <n-space>
                                    <div v-html='question.content'>
                                    </div>
                                </n-space>
                                <!-- 选项 -->
                                <n-space>
                                    <template v-if="question.type == 0">
                                        <n-radio-group v-model:value="studentAnswer[question.QID.toString()]['answer']"
                                            disabled name="radiogroup">
                                            <n-space vertical>
                                                <n-radio v-for="option in question.realOptions" :key="option.value"
                                                    :value="option.value">
                                                    {{  option.label  }}
                                                </n-radio>
                                            </n-space>
                                        </n-radio-group>
                                    </template>
                                    <template v-if="question.type == 1">
                                        <n-checkbox-group
                                            v-model:value="studentAnswer[question.QID.toString()]['answer']" disabled>
                                            <n-space vertical>
                                                <n-checkbox v-for="option in question.realOptions" :value="option.value"
                                                    :label="option.label">

                                                </n-checkbox>
                                            </n-space>
                                        </n-checkbox-group>
                                    </template>
                                    <template v-if="question.type == 2">
                                        <n-radio-group :value="studentAnswer[question.QID.toString()]['answer']==true?'true':'false'"
                                            disabled name="radiogroup">
                                            <n-space>
                                                <n-radio key="true" value="true">
                                                    正确
                                                </n-radio>
                                                <n-radio key="false" value="false">
                                                    错误
                                                </n-radio>
                                            </n-space>
                                        </n-radio-group>
                                    </template>
                                    <template v-if="question.type == 3">
                                        <n-input :value="studentAnswer[question.QID.toString()]['answer']"
                                            disabled>
                                        </n-input>
                                    </template>
                                    <template v-if="question.type == 4">

                                        <n-card>
                                            <!-- {{studentAnswer[question.QID.toString()]['answer']}} -->
                                            <!-- <div v-html="studentAnswer[question.QID.toString()]['answer']">
                                    </div> -->
                                            <QuillEditor :options="EditorOptions" :readOnly="true"
                                                v-model:content="studentAnswer[question.QID.toString()]['answer']"
                                                style="height: 250px;min-width:200px" class="quillEditor" />
                                        </n-card>
                                    </template>
                                </n-space>
                                <n-space vertical>
                                    <n-text>获得分数</n-text>
                                    <!-- 分数修改 -->
                                    <n-input-number readonly :min="0" :max="question['score']"
                                        v-model:value="studentCorrection[question.QID.toString()]['score']">
                                    </n-input-number>
                                    <n-card>
                                        参考答案：
                                        <n-space>
                                            <template v-for="stdAnswer in question['answer']">
                                                <n-tag type="success">
                                                    <template v-if="question['type'] == 0 || question['type'] == 1">
                                                        {{  question['realOptions'][stdAnswer].label  }}
                                                    </template>
                                                    <template v-else>
                                                        {{  question['answer'][0]  }}
                                                    </template>
                                                </n-tag>
                                            </template>
                                        </n-space>
                                    </n-card>
                                </n-space>
                            </n-space>
                        </n-card>
                    </template>
                </n-space>
            </n-card>
        </n-gi>
    </n-grid>
</template>
<script lang='ts' setup>

import { onMounted, reactive, ref } from "vue";
import { getScore } from '@/api/student/exam';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { QuillEditor } from '@vueup/vue-quill';
import { useRoute, useRouter } from "vue-router";


const EditorOptions = reactive({
    modules: {
        toolbar: [
        ],
    },
    theme: 'snow',
    placeholder: '请输入你的答案',
});

const questionValueKey = {
    0: '单选',
    1: '多选',
    2: '判断',
    3: '填空',
    4: '简答'
}

const studentExamInfo: any = ref({
    questionList: {}
});

const studentAnswer: any = ref({});
const studentCorrection: any = ref({});
const route = useRoute();
const router = useRouter();

function handleBack() {
    router.go(-1);
}

onMounted(async () => {
    studentExamInfo.value = await getScore({ SID: route.params.SID, EID: route.params.EID }).then().catch(
        () => {
            router.go(-1);
        }
    );
    for (let questionKey in studentExamInfo.value['questionList']) {
        if (studentExamInfo.value['questionList'][questionKey]['type'] == 0 || studentExamInfo.value['questionList'][questionKey]['type'] == 1) {
            studentExamInfo.value['questionList'][questionKey]['realOptions'] = [];
            for (let optionKey in studentExamInfo.value['questionList'][questionKey]['options']) {
                studentExamInfo.value['questionList'][questionKey]['realOptions'].push({
                    label: studentExamInfo.value['questionList'][questionKey]['options'][optionKey].content,
                    value: studentExamInfo.value['questionList'][questionKey]['options'][optionKey].key
                })
            }
            console.log(studentExamInfo.value['questionList'][questionKey]['realOptions']);
        }
    }
    // studentExamInfo.value['studentExam']['answer'].forEach(element => {
    //     studentAnswer.value[element['QID']] = element;
    // });
    for (let key in studentExamInfo.value['studentExam']['answer']) {
        studentAnswer.value[studentExamInfo.value['studentExam']['answer'][key]['QID']] = studentExamInfo.value['studentExam']['answer'][key];
    }
    console.log(studentAnswer.value);
    studentExamInfo.value['studentExam']['correction']['detail'].forEach(element => {
        studentCorrection.value[element['QID']] = element;
    });
    // for (let key in studentExamInfo.value['studentExam']['correction']['detail']){
    //     studentAnswer.value[studentExamInfo.value['studentExam']['correction']['detail'][key]['QID']] =studentExamInfo.value['studentExam']['correction']['detail'][key];
    // }
});

</script>

<style lang="less">
.ql-toolbar.ql-snow {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #eee;
    margin-top: -10px;
}

.ql-container.ql-snow {
    border: none;
}
</style>
    